<template>
	<view class="page">
		<div class="title">登录</div>
		<div class="sub-title">
			<text class="text1">您还没有账号？</text>
			<text class="text2" @click="register()">点击注册</text>
		</div>
		<form @submit="formSubmit">
			<div class="form">
				<div class="item">
					<text class="padding-right:30rpx">+86</text>
					<input name="mobile" v-model="mobile" placeholder="请输入手机号" style="margin-left:10px;" />
				</div>
				<div class="item">
					<input name="pwd" v-model="pwd" v-if="!is_show" type="password" placeholder="请输入密码" />
					<input name="pwd" v-model="pwd" v-else type="text" placeholder="请输入密码" />
					<!-- style="width: 25px;position:absolute;right:.2rem;bottom:.7rem;" -->
					<div tapmode @click='show_pwd()'>
						<image v-if="!is_show"
							style="width: 25px;height:25px"
							src="https://zm.zonmay.com/public/static/image/icon_noeye.png" /></image>
						<image v-else style="width: 25px;height:25px;"
							src="https://zm.zonmay.com/public/static/image/icon_eye.png" /></image>
					</div>
				</div>
				<div class="forget" @click="retrieve()">
					<text class="padding-right:30rpx">忘记密码?</text>
				</div>
			</div>
			<div class="btn">
				<button class="submit" form-type="submit" :class="{'aui-bg-linear':mobile!=''&&pwd!=''}">登录</button>
			</div>
		</form>

		<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
			<checkbox class="blue" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false"
				value="2" />
			<view>
				我已阅读<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text
					@tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私协议')">隐私协议</text>
			</view>
		</checkbox-group>
		<!-- #ifdef MP -->
		<!-- <zero-privacy :onNeed='false' :hideTabBar='true'></zero-privacy> -->
		<!-- #endif -->
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker"; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				is_show: false,
				submitDisabled: true,
				title: "表单验证",
				pageroute: "",
				mobile: "",
				pwd: '',
				sms_code: '',
				inviteCode: '',
				regionId: '',
				checked: 0,
				value: "",
				verificationCode: "获取验证码",
				timer: null,
				time: 60,
				type: 'text',
				user_id: 0,
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
			
			this.mobile = uni.getStorageSync("mobile");
			this.pwd = uni.getStorageSync("pwd");
		},
		methods: {
			show_pwd() {
				this.is_show = !this.is_show
				if (this.is_show) {
					this.type = 'text'
				} else {
					this.type = 'password'
				}
			},
			register() {
				uni.navigateTo({
					url: `/pages/user/auth/register`
				})
			},
			retrieve() {
				uni.navigateTo({
					url: `/pages/user/auth/retrieve`
				})
			},
			getCode() {
				console.log(this.timer, this.time, "----");
				if (this.timer) return;
				clearInterval(this.timer);
				this.verificationCode = this.time;
				this.timer = setInterval(() => {
					this.time--;
					console.log(this.timer, this.time, "----");
					this.verificationCode = this.time;
					if (this.time == 0) {
						this.verificationCode = "获取验证码";
						clearInterval(this.timer);
					}
				}, 1000);
			},
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			onKeyInput: function(e) {
				this.submitDisabled = false;
			},
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: 'mobile',
						checkType: 'notnull',
						errorMsg: '请输入用户名'
					},
					{
						name: 'pwd',
						checkType: 'string',
						checkRule: '6,16',
						errorMsg: '密码至少6位'
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				console.log(checkRes)
				
				if(this.checked == 0){
					uni.showModal({
						title:'请先阅读并同意用户协议和隐私协议'
					})
					return;
				}
				// alert(this.checked)
				

				if (checkRes) {
					uni.request({
						url: '/api/Login/xcx_login',
						method: 'POST',
						data: {
							mobile: this.mobile,
							password: this.pwd,
							// client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
							// 	"wanlshop:chat_client_id") : null
						},
						success: res => {
							uni.setStorageSync("mobile",this.mobile)
							uni.setStorageSync("pwd",this.pwd)
							
							console.log(res.data)
							
							if (res.res) {
								console.log(res.data.xcx_openid)
								// #ifdef MP-WEIXIN
								console.log(11111)
								if (res.data.xcx_openid == '') {
									console.log(res.data.xcx_openid);
									this.getopenid()
								}

								// #endif
								this.user_id = res.data.id;
								this.$store.dispatch('cart/login');
								this.$store.dispatch('user/login', res.data);
								// return;
								console.log(789)
								console.log(this.pageroute)
								
								
								if (this.pageroute) {
									uni.switchTab({
										url:'/pages/user'
									})
									// uni.reLaunch({
									// 	url: decodeURIComponent(this.pageroute)
									// });
								} else {
									// uni.navigateBack(1)
									uni.switchTab({
										url:'/pages/index'
									})
								}
							}

							if (res.data.status == 0) {
								uni.showToast({
									title: res.data.msg
								})
								return;
							}

							if (res.data.status == -2) {
								uni.navigateTo({
									url: '/pages/user/auth/register'
								})
								return;
							}



							// uni.navigateBack({
							// 	delta: 1
							// });


							// this.$store.dispatch('cart/login');
							// this.$store.dispatch('chat/get');
							// uni.reLaunch({
							// 	url: decodeURIComponent(this.pageroute)
							// });
						},
						fail: res => {
							console.log(res)
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			getopenid() {
				console.log(222)
				// 获取用户信息
				uni.getUserProfile({
					desc: '需要获取您的个人信息完成注册',
					success: async infoRes => {

						console.log(333)
						console.log(infoRes)

						let userinfo = infoRes.userInfo;
						// this.info.nickname = userinfo.nickName;
						// this.info.avatar = userinfo.avatarUrl;
						// this.info.gender = userinfo.gender;

						uni.login({
							provider: 'weixin',
							success: async loginRes => {
								console.log(444)
								console.log(loginRes)

								let code = loginRes.code;
								// 用code换取openid

								uni.request({
									url: "/api/Login/getOpenid",
									data: {
										code: loginRes.code,
										user_id: this.user_id,
										token: this.$store.state.user.token
									},
									success: (res) => {
										console.log(555)
										console.log(res)
										// let openid = res.data.openid;
										// console.log(openid);
										// return openid;
									},
									fail: (res) => {

									},
								});





							},
							fail: () => {
								uni.hideLoading();
								// helper.toast('获取用户信息失败');
							}
						});

					},
					fail: () => {
						uni.hideLoading();
						// helper.toast('获取用户信息失败');
					}
				});
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
		},
	};
</script>

<style lang="scss">
	.page {
		padding: 100rpx 50rpx;
		box-sizing: border-box;

		.title {
			font-size: 62rpx;
			font-weight: 700;
		}

		.sub-title {
			margin-top: 20rpx;
			font-size: 32rpx;

			.text1 {
				color: #808080;
			}

			.text2 {
				color: #005a93;
			}
		}

		.form {
			margin-top: 90rpx;

			.forget {
				padding: 10px;
				text-align: right;
			}

			.item {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #e6e6e6;
				position: relative;

				.getCode {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					color: #005a93;
					width: 160rpx;
					height: 100%;
					line-height: 110rpx;
					text-align: center;
					z-index: 111;
				}

				input {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			margin-top: 80rpx;

			.submit {
				width: 100%;
				height: 100%;
				background: #b3cedf;
				font-size: 26rpx;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.aui-bg-linear {
		background: rgba(0, 90, 147, 1) !important;
	}

	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
		margin-top: 50rpx;

		checkbox {
			margin-right: 6rpx;
			transform: scale(0.7);
		}

		text {
			margin: 0 10rpx;
			color: #005a93;
		}
	}
</style>